import React from 'react';
import videojs from 'video.js'
import qualityselector from "./QualitySelector"
import "video.js/dist/video-js.css";
import "./QualitySelector.less"
import "./VideoPlayer.less"
export default class VideoPlayer extends React.Component {
    shouldComponentUpdate(nextProps){ // 应该使用这个方法，否则无论props是否有变化都将会导致组件跟着重新渲染

        if(!nextProps.videoJsOptions || JSON.stringify(nextProps.videoJsOptions) === JSON.stringify(this.props.videoJsOptions)){
            return false
        }else{
            return true
        }
    }
    componentDidMount() {
        if (this.props.onRef){
            this.props.onRef(this);
        }
        // instantiate Video.js
        const videoJsOptions = this.props.videoJsOptions;
        if (videoJsOptions.sources[0] && videoJsOptions.sources[0].src) {
            const _props = this.props;
            const ext = videoJsOptions.sources[0].src ? videoJsOptions.sources[0].src.split(".").pop().toLowerCase() : "mp4";
            this.player = videojs(this.videoNode, videoJsOptions, function onPlayerReady() {

                if (_props.snapScreen && videoJsOptions.isUpdate === 1){ //存在截图方法并且重新上传视频自动截图
                    this.load();
                    if (ext.indexOf('m3u8') != -1){
                        this.currentTime(1);
                    }
                    setTimeout(()=>{
                        _props.snapScreen();
                    },1000);
                }
            });

            if (videoJsOptions.formats && videoJsOptions.formats.length > 0){
                qualityselector.call(this.player, {

                    sources: videoJsOptions.sources,
                    formats: videoJsOptions.formats,
                    text: videoJsOptions.sources[0].format,
                    onFormatSelected: function (format) {
                        console.log(format);
                    }
                });
            }


        }
        //设置中文
        videojs.addLanguage('zh-CN', {
            "Play": "播放",
            "Pause": "暂停",
            "Current Time": "当前时间",
            "Duration": "时长",
            "Remaining Time": "剩余时间",
            "Stream Type": "媒体流类型",
            "LIVE": "直播",
            "Loaded": "加载完毕",
            "Progress": "进度",
            "Fullscreen": "全屏",
            "Non-Fullscreen": "退出全屏",
            "Mute": "静音",
            "Unmute": "取消静音",
            "Playback Rate": "播放速度",
            "Subtitles": "字幕",
            "subtitles off": "关闭字幕",
            "Captions": "内嵌字幕",
            "captions off": "关闭内嵌字幕",
            "Chapters": "节目段落",
            "Close Modal Dialog": "关闭弹窗",
            "Descriptions": "描述",
            "descriptions off": "关闭描述",
            "Audio Track": "音轨",
            "You aborted the media playback": "视频播放被终止",
            "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
            "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
            "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
            "No compatible source was found for this media.": "未配置视频源或无法找到此视频兼容的源。",
            "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
            "Play Video": "播放视频",
            "Close": "关闭",
            "Modal Window": "弹窗",
            "This is a modal window": "这是一个弹窗",
            "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
            ", opens captions settings dialog": ", 开启标题设置弹窗",
            ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
            ", opens descriptions settings dialog": ", 开启描述设置弹窗",
            ", selected": ", 选择",
            "captions settings": "字幕设定",
            "Audio Player": "音频播放器",
            "Video Player": "视频播放器",
            "Replay": "重播",
            "Progress Bar": "进度小节",
            "Volume Level": "音量",
            "subtitles settings": "字幕设定",
            "descriptions settings": "描述设定",
            "Text": "文字",
            "White": "白",
            "Black": "黑",
            "Red": "红",
            "Green": "绿",
            "Blue": "蓝",
            "Yellow": "黄",
            "Magenta": "紫红",
            "Cyan": "青",
            "Background": "背景",
            "Window": "视窗",
            "Transparent": "透明",
            "Semi-Transparent": "半透明",
            "Opaque": "不透明",
            "Font Size": "字体尺寸",
            "Text Edge Style": "字体边缘样式",
            "None": "无",
            "Raised": "浮雕",
            "Depressed": "压低",
            "Uniform": "均匀",
            "Dropshadow": "下阴影",
            "Font Family": "字体库",
            "Proportional Sans-Serif": "比例无细体",
            "Monospace Sans-Serif": "单间隔无细体",
            "Proportional Serif": "比例细体",
            "Monospace Serif": "单间隔细体",
            "Casual": "舒适",
            "Script": "手写体",
            "Small Caps": "小型大写字体",
            "Reset": "重启",
            "restore all settings to the default values": "恢复全部设定至预设值",
            "Done": "完成",
            "Caption Settings Dialog": "字幕设定视窗",
            "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
            "End of dialog window.": "结束对话视窗"
        });

    }

    // destroy player on unmount
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }

    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        this.loadOption();
    }

    loadOption = () =>{

        const videoJsOptions = this.props.videoJsOptions;
        let VideoUrl = videoJsOptions.sources[0].src;
        if (VideoUrl) {
            const _props = this.props;
            const ext = VideoUrl ? VideoUrl.split(".").pop().toLowerCase() : "mp4";
            if (this.player){

                this.player = videojs(this.videoNode, videoJsOptions, function onPlayerReady() {


                    if (_props.snapScreen && videoJsOptions.isUpdate === 1){ //存在截图方法并且重新上传视频自动截图
                        this.load();

                        if (ext.indexOf('m3u8') != -1){
                            this.currentTime(1);
                        }

                        setTimeout(()=>{
                            _props.snapScreen();
                        },1000);
                    }
                });

                // this.player.src([
                //     {type: ext, src:VideoUrl}
                // ]);
                this.player.src(VideoUrl);

                this.player.load();
            }else {

                this.player = videojs(this.videoNode, videoJsOptions, function onPlayerReady() {

                    if (_props.snapScreen && videoJsOptions.isUpdate === 1){ //存在截图方法并且重新上传视频自动截图
                        this.load();

                        if (ext.indexOf('m3u8') != -1){
                            this.currentTime(1);
                        }
                        setTimeout(()=>{
                            _props.snapScreen();
                        },1000);
                    }

                });
            }

        }

    }

    // wrap the player in a div with a `data-vjs-player` attribute
    // so videojs won't create additional wrapper in the DOM
    // see https://github.com/videojs/video.js/pull/3856
    render() {
        let video_id = this.props.videoId ? this.props.videoId : 'video_src';
        let crossOrigin = this.props.crossOrigin ? this.props.crossOrigin : '';
        return (
            <div className="video-wrap">
                <div className="upload-layer" onClick={this.props.uploadVideo}></div>
                <div data-vjs-player >
                    <video ref={node => this.videoNode = node} id={video_id}   className="video-js vjs-default-skin video vjs-big-play-centered" crossOrigin={crossOrigin} ></video>
                </div>
            </div>
        )
    }
}